<template>
	<view class="promo">
		<view class="promo_link">
			<input type="text" class="promo_link_input" :value="url" />
			<view class="promo_link_btn" @click="copy">
				<rui-icons icon="copy" size="40"></rui-icons>
			</view>
		</view>
		<view class="promo_tips">
			<rui-icons icon="info" size="25"></rui-icons> 复制链接发给好友购买成功可获使用时长。
		</view>

		<view class="promo_head">
			<view class="promo_head_title">
				推广用户
			</view>
			<view class="promo_head_tab">
				<view class="promo_head_tab_item" :class="current == index ?'active':''" v-for="(item,index) in tab"
					:key="index" @click="onTab(index)">
					{{item.name}}
				</view>
			</view>
		</view>
		<view v-if="list.length">
			<view class="promo_user">
				<view class="promo_user_item" v-for="(item, index) in list" :key="index">
					<view class="promo_user_item_info">
						<view class="promo_user_item_info_name">
							{{item.name}}
						</view>
						<view class="promo_user_item_info_date">
							{{item.created_at}}
						</view>
					</view>
					<view class="promo_user_item_status" :class="item.grade == 2 ?'red':''">
						{{item.grade == 1 ? '未购买':'已购买'}}
					</view>
				</view>
			</view>
			<view class="promo_more" @click="change">
				{{text[status]}}
			</view>
		</view>
		<view class="promo_empty" v-else>
			<rui-icons icon="msg" size="50"></rui-icons>
			<view class="promo_empty_text">
				数据为空
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"

	import {
		userStore
	} from "@/store/index.js"

	const user = userStore();
	let url = ref(location.host + '/#/?p=' + user.info?.promo)

	defineProps({
		list: Array,
		status: {
			type: String,
			default: "not"
		},
		current: {
			type: Number,
			default: 0
		}
	})
	let text = ref({
		not: "已加载全部",
		next: "点击加载下页"
	})

	let tab = ref([{
			name: "全部"
		},
		{
			name: "未购买"
		},
		{
			name: "已购买"
		},
	])

	const emits = defineEmits(['change', 'tab'])
	const change = () => {
		emits('change')
	}

	const onTab = (index) => {
		emits('tab', index)
	}

	const copy = () => {
		uni.setClipboardData({
			data: url.value,
			success: function() {
				uni.showToast({
					title: "复制成功"
				})
			}
		});
	}
</script>

<style lang="scss" scoped>
	.red{
		color: #f30!important;
	}
	.promo {
		&_empty {
			padding: 50rpx;
			text-align: center;
			background: #f5f6f7;
			border-radius: 10rpx;
			margin: 20rpx;

			&_text {
				font-size: 24rpx;
				color: #999;
			}
		}

		&_head {
			display: flex;
			justify-content: space-between;
			margin: 50rpx 20rpx 20rpx;

			.active {
				color: #f00;
				font-weight: bold;
				position: relative;

				&::before {
					content: "";
					display: block;
					height: 4rpx;
					width: 100%;
					background: #f00;
					position: absolute;
					bottom: -10rpx;
					left: 0;
					border-radius: 20rpx;
				}
			}

			&_tab {
				display: flex;
				align-items: center;

				&_item {
					margin-left: 40rpx;
					color: #999;
				}
			}

			&_title {
				font-weight: bold;
				font-size: 36rpx;
			}
		}

		&_tips {
			font-size: 24rpx;
			color: #999;
			margin: 0 20rpx;
		}

		&_link {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx;
			background: #f5f6f7;
			padding: 20rpx;
			border-radius: 10rpx;

			&_input {
				width: calc(100% - 80rpx);
			}
		}



		&_more {
			text-align: center;
			font-size: 24rpx;
			color: #999;
		}

		&_user {
			margin: 20rpx;
			background: #f5f6f7;
			border-radius: 10rpx;
			padding: 10rpx 30rpx;

			&_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 20rpx 0;
				border-bottom: 1rpx dashed #e5e5e5;
				padding-bottom: 20rpx;

				&:last-child {
					border-bottom: none;
					padding-bottom: 0;
				}

				&_status {
					border-radius: 50rpx;
					background: #fff;
					border: 1rpx solid #ddd;
					padding: 4rpx 16rpx;
					font-size: 22rpx;
					color: #999;
				}

				&_info {
					&_name {}

					&_date {
						font-size: 24rpx;
						color: #999;
					}
				}

			}
		}
	}
</style>